<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<meta charset="UTF-8" />
		<title>资源压缩</title>
	</head>
	<body>
		<button id="zip" class="btn btn-primary">click to zip</button>
		<button id="unzip" class="btn btn-primary">click to unzip</button>
		<div id="result_block" class="hidden">
			<h3>Content :</h3>
			<div id="result"></div>
			<div id="fileContent"></div>
		</div>
	</body>
	<script src="./../../asset/jquery.min.js"></script>
	<script src="./js/jszip.min.js"></script>
	<script src="./js/jszip-utils.min.js"></script>
	<script src="./js/FileSaver.js"></script>
	<script>
        // 创建一个zip 对象，将文件名和内容读到文件中
		var myZip = new JSZip();
		JSZipUtils.getBinaryContent(
			'http://127.0.0.1:5500/template.zip',
			function (err, data) {
				if (err) {
					throw err; // or handle err
				}

				JSZip.loadAsync(data)
					.then(function (zip) {
						console.log(zip);
						return zip.file('广告法修改.docx').async('uint8array');
					})
					.then(
						function success(text) {
		                    myZip.file('img1.png', text);
						},
						function error(e) {
							$('#jszip_utils').append(
								$('<p>', {
									class: 'alert alert-danger',
									text: e,
								})
							);
						}
					);
			}
		);
        // var zip = new JSZip();
		// zip.file('readme.md', '#### hello\nMichael 测试文件'); // 直接把一个文件放在根目录下面
		// // 在根目录下放一个文件夹 media，内部包含两个模拟图片文件
		// zip
		// 	.folder('media')
		// 	.file(
		// 		'test.pdf',
		// 		'https://s3.51cto.com/images/202111/02/e93fd9043927f6b53ce1d831a59a7728.png'
		// 	);
		window.result = '';

		// 将文本压缩zip 并下载
		$('#zip').on('click', function () {
			// type: "string"
			myZip.generateAsync({ type: 'blob' }).then(
				function (blob) {
					// 1) generate the zip file
					// console.log(blob);
					window.result = blob; // 绑定到全局组件上，使用另一个按钮下载
					// // 2) trigger the download
					saveAs(blob, 'hello.zip');
				},
				function (err) {
					$('#blob').text(err);
				}
			);
		});

		// 将 zip 文件解压缩成内容读取。
		$('#unzip').on('click', function () {
			JSZip.loadAsync(window.result)
				// 1) read the Blob
				.then(
					function (zip) {
						console.log(zip);
						zip.forEach(function (relativePath, zipEntry) {
							// 2) print entries
							$('#fileContent').append(
								$('<li>', {
									text: zipEntry.name,
								})
							);
						});
					},
					function (e) {
						$('#result').append(
							$('<div>', {
								class: 'alert alert-danger',
								text: 'Error reading ' + window.result.name + ': ' + e.message,
							})
						);
					}
				);
		});

		// 模拟点击，下载文件
		// fake_click(save_link);
		function fake_click(obj) {
			var ev = document.createEvent('MouseEvents');
			ev.initMouseEvent(
				'click',
				true,
				false,
				window,
				0,
				0,
				0,
				0,
				0,
				false,
				false,
				false,
				false,
				0,
				null
			);
			obj.dispatchEvent(ev);
		}

		// 下载文件
		// download("save.txt","hello world");
		function download(name, data) {
			var urlObject = window.URL || window.webkitURL || window;
			var downloadData = new Blob([data]);
			var save_link = document.createElementNS(
				'http://www.w3.org/1999/xhtml',
				'a'
			);
			save_link.href = urlObject.createObjectURL(downloadData);
			save_link.download = name;
			fake_click(save_link);
		}
	</script>
</html>
